<html>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    png_exist="";
</script>
<style>
    body {
        background: whitesmoke;
    }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }

    html,
    body,
    * {
        margin: 0px;
        padding: 0px;
        font-variant: 500px;

        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
    }

    .navigation-bar {
        height: 60px;
        background: #fff;
        border: 1px solid #ddd;
    }

    .navigation-bar-content {
        margin: 0px auto;
        width: 1000px;
        height: 100%;
        background: #fff;
        display: table;
        letter-spacing: 5px;
    }

    .navigation-bar-content>* {
        display: table-cell;
        vertical-align: middle;
        width:100px;
        text-align:center
    }

    .body-content {
        background: #fff;

        /*position:absolute;*/
        border: 1px solid #ddd;
        margin: 20px auto;
        
        padding: 50px;
        padding-right: 10px;
        width: 1000px;
        height: 600px;
        display: flex;
    }

    span.delete {
        background: url("");
        padding: 0px 7px;
        
        cursor: pointer;
    }
    ul{
        list-style-type: none;
        padding-right:40px; 
    }
    li{
        margin-top:20px;
    }
    a{
        color:#56c9fd;
        text-decoration:none;
    }
    a:visited{
        color:#56c9fd;
    }
    a[href],a[onclick]{
        cursor: pointer;
    }
    a[href]:hover,a[onclick]:hover{
        text-decoration:underline;
    }
    .navigation-bar-content>a.selected{
        background:#ccc;
        color:#fff;
    }
    .navigation-bar-content>a[onclick]:not(.selected):hover{
        background:#eee;
    }
</style>

<body onselectstart="return false;">

    <div class='navigation-bar'>
        <div class='navigation-bar-content'>
            
            <a onclick=''>插件管理</a>
            <a onclick=''>框架管理</a>
            <a>&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</a>
            <a>&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</a>
            <a>&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</a>
            <a>&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</a>
        </div>
    </div>
    <div class='body-content'>
        
        <ul style="width:100%;overflow-y:auto;" id='app_list' class='page'>
            
        </ul>
        <ul style="width:100%;overflow-y:auto;display:none;font-size:14px;" class='page'>
            <div id='page_info' style='width:600px;height:400px;'>
                </div>
        </ul>
    </div>
    <script>
        $(function(){
            var btn=$(".navigation-bar-content>a");
            var page=$(".page");
            var m=function attach(){
                var btn=$(".navigation-bar-content>a");
                var index=btn.index(this);
                var page=$(".page");
                for(var i=0;i<page.length;i++){
                    
                    if(i==index){
                        $(btn[i]).addClass("selected");
                        $(page[i]).show();
                    }else{
                        $(btn[i]).removeClass("selected");
                        
                    $(page[i]).hide();}
                }
            }
            for(var i=0;i<btn.length&&i<page.length;i++){
                $(btn[i]).click(m);
            }
            $(btn[0]).click();
        });
        $.get("/core/show",function(data){
            $("#page_info").html(data);
        })
        $.get("/core/pluginmanger?type=list", function (data) {
            data = JSON.parse(data);
            data=data["data"];
            for(var i=0;i<4;i++){data.push(data[i]);}
            $("#app_list").html();
            var __html = `
            
            <li>
                <table style='font-size:12px;width:100%;'>
                    <tr>
                        <td rowspan="3" style='width:80px;'><img style='width:32px;height:32px;padding:16px;' src='{icon}'/></td>
                        <td><a style='font-weight: 600;'>{title}</a><a style='color:#aaa;margin-left:20px'>{version}</a></td>
                        <td style='width:50px;text-align:right'><span class='delete' ></span></td>
                    </tr>
                    <tr>
                        <td style='color:#aaa;'>{content}</td>
                    </tr>
                    <tr>
                        <td>详细信息</td><td style='text-align:right'><a href='{help_url}' target="_blank" >{help_url}</a></td>
                    </tr>
                </table>
            </li>
            `;

            var out=[];
            var def={"icon":png_exist,"title":"匿名插件","version":"1.0.0.0","content":"作者没有留下任何内容","help_url":""}
            for(var i=0;i<data.length;i++){
                var line= data[i];
                var html=__html;
                
                for (var  key in def) {
                    if(line[key]==""||line[key]==null)line[key]=def[key];
                    html=html.replace(new RegExp("{"+key+"}", "gm"),line[key]);
                }
                out.push(html);
            }
            $("#app_list").append(out.join("<br/><hr/>"));
            $("#app_list").append("<br/><center><a style='color:#aaa'>共"+data.length+"个插件</a></center>");
        })
    </script>
</body>

</html>